<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>广告弹窗</title>
    <link rel="stylesheet" href="/js/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/common.css" media="all">
    <script src="/js/layui/layui.all.js"></script>
</head>
<style>
    .layui-table-cell {
        height: 60px;
        line-height: 60px;
    }
</style>
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-form layui-card-header layuiadmin-card-header-auto">
            <div style="text-align: center;line-height: normal">
                <div class="layui-inline">
                    <div class="layui-form">
                        <div class="layui-form-item">
                            <label class="layui-form-label" >状态</label>
                            <div class="layui-input-inline">
                                <select id="status" name="status" lay-filter="status">
                                    <option value="-1" >不限</option>
                                    <option value="1" >启用</option>
                                    <option value="0" >禁用</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="layui-inline">
                    <button class="layui-btn layuiadmin-btn-admin search" lay-submit lay-filter="LAY-user-back-search">
                        <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i><span>搜索</span>
                    </button>
                </div>
            </div>
        </div>
        <span style="color: red;margin-left: 20px">同时只能有一个广告启用，当没有启用广告时则不弹窗</span>
        <div class="layui-card-body">
            <table class="layui-hide" id="t" lay-filter="t"></table>
        </div>
    </div>
</div>
</body>

<script type="text/html" id="tb">
    <!--<div class="layui-container" style="margin-left:0px;">-->
    <!--<a class="layui-btn layui-btn-xs" lay-event="add"><i class="layui-icon layui-icon-addition"></i>新增模板</a>-->
    <!--</div>-->
</script>

<script type="text/html" id="caozuo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail"><i class="layui-icon layui-icon-edit"></i><span>编辑</span></a>
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="delete"><span>删除</span></a>
</script>
<script type="text/html" id="checkboxTpl">
    <input type="checkbox" name="status" value="{{d.id}}" title="启用" lay-filter="lockDemo" {{ d.status== 1
           ? 'checked' : '' }} />
</script>

<script>
    var $ = layui.$;
    var table = layui.table;
    var form = layui.form;

    form.render('select');
    var lunbotuTable = table.render({
        elem: '#t',
        id: 'tt',
        toolbar: '#tb',
        url: '/advertise/selectAdvertise',
        cols: [
            [
                {fixed: 'left', field: '', title: '序号', width: 70, type: 'numbers', align: 'center'},
                {
                    field: 'picture',
                    title: '中文图片',
                    width: 200,
                    align: 'center',
                    templet: '<div><img src="/upload/advertise/{{ d.picture }}" height=\'60px\' onclick="previewImgs(this)"></div>'
                },
                {
                    field: 'picture_en',
                    title: '英文图片',
                    width: 200,
                    align: 'center',
                    templet: '<div><img src="/upload/advertise/{{ d.picture_en }}" height=\'60px\' onclick="previewImgs(this)"></div>'
                },
                {
                    field: 'picture_tai',
                    title: '泰语图片',
                    width: 200,
                    align: 'center',
                    templet: '<div><img src="/upload/advertise/{{ d.picture_tai }}" height=\'60px\' onclick="previewImgs(this)"></div>'
                },
                {
                    field: 'picture_tai',
                    title: '柬埔寨图片',
                    width: 200,
                    align: 'center',
                    templet: function (d) {
                        return d.picture_kh!=null && d.picture_kh!="" ? "<div><img src='/upload/advertise/"+d.picture_kh+"' height='60px' onclick='previewImgs(this)'></div>" : "";
                    }
                },
                {fixed: 'right', field: 'status', align: 'center', title: '状态', width: 120, templet: '#checkboxTpl'},
                {fixed: 'right', toolbar: '#caozuo', title: '操作', width: 160, align: 'center'}
            ]
        ],
        page: true,
        page: {
            curr: layui.data("advertise_page").index
        },
        done: (res, curr, count) => {
            layui.data("advertise_page", {
                key: 'index',
                value: curr
            });
        }
    });

    function search() {
        table.reload('tt', {
            url: '/advertise/selectAdvertise',
            where: {
                status: $("#status").val()
            },
            page: {
                curr: 1
            }
        })
    }

    //搜索
    $('.search').on('click', function () {
        search();
    });

    //排序
    form.on("select(status)",function (data) {
        table.reload('tt', {
            url: '/advertise/selectAdvertise',
            where: {
                status: $("#status").val()
            },
            page: {
                curr: 1
            }
        })
    });

    // 关键词搜索框添加绑定回车函数
    $('#test-table-demoReload').bind('keypress', function (event) {
        search();
    });

    //监听工具条
    table.on('tool(t)', function (obj) {
        var data = obj.data;
        layui.data("advertise", {
            key: "data",
            value: data
        });
        if (obj.event === 'detail') {
            layer.open({
                type: 2,
                area: ['100%', '100%'],
                content: 'updateAdvertise.html', //这里content是一个普通的String
                end: function () {
                    location.reload();
                }
            });
        }else if (obj.event === 'delete'){
            layer.confirm("确定删除该轮播图?",["确定","取消"],function(){
                $.ajax({
                    url:'/advertise/deleteAdvertise?id='+data.id,
                    type:'post',
                    success:function(data){
                        if (data.code==200)
                        {
                            layer.msg("删除成功",{icon:1,time:1000},function(){
                                lunbotuTable.reload({
                                    where: { //设定异步数据接口的额外参数，任意设
                                        title: $("#test-table-demoReload").val(),
                                        status:$("#status").val()
                                    }
                                    ,page: {
                                        curr: 1 //重新从第 1 页开始
                                    }
                                });
                            });
                        }else{
                            layer.msg(data.msg,{icon:1,time:1000});
                        }
                    }
                })
            });


        }
    });

    //监听启用操作
    form.on('checkbox(lockDemo)', function (obj) {
        var id = this.value;
        var status = obj.elem.checked;
        var s = "确认吗？";
        var zhuangtai;
        if (status) {
            s="确认要启用吗？";
            zhuangtai = 1;
        } else {
            s="确认要禁用吗？";
            zhuangtai = 0;
        }
        layer.open({
            title:"提示",
            content:s,
            btn:["确认","取消"],
            btn1:function () {
                $.ajax({
                    url: "/advertise/updateAdvertiseStatus?id="+id+"&status="+zhuangtai
                    , type: "post"
                    , contentType: 'application/json'
                    , success: function (data) {
                        if (data.code == 0) {
                            layer.close(layer.index);
                            layer.msg('操作成功');
                            setTimeout(function () {
                                window.location.reload();
                            },1000)
                        } else if (data.code == 1) {
                            obj.elem.checked = !status;
                            layui.form.render();
                            layer.msg('操作失败');
                        } else {
                            obj.elem.checked = !status;
                            layui.form.render();
                            layer.msg('没有权限');
                        }
                    }
                    , error: function () {
                        obj.elem.checked = !status;
                        layui.form.render();
                        layer.msg("服务器接口异常");
                    }
                });
            },
            btn2:function () {
                obj.elem.checked = !status;
                layui.form.render();
            },
            cancel:function () {
                obj.elem.checked = !status;
                layui.form.render();
            }
        });
    });

    $('.test-table-operate-btn .layui-btn').on('click', function () {
        var type = $(this).data('type')
        active[type] ? active[type].call(this) : ''
    })

</script>
<script>
    function previewImgs(obj) {
        var img = new Image();
        img.src = obj.src;
        //var height = img.height + 50; // 原图片大小
        //var width = img.width; //原图片大小
        var imgHtml = "<img src='" + obj.src + "' width='800px' height='500px'/>";
        //弹出层
        layer.open({
            type: 1,
            shade: 0.8,
            offset: 'auto',
            area: [800 + 'px', 550 + 'px'],// area: [width + 'px',height+'px'],  //原图显示
            // area: ['47.2%','64.3%'],
            // area: ['95%','95%'],
            shadeClose: true,
            scrollbar: false,
            title: "图片预览", //不显示标题
            content: imgHtml, //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
            cancel: function () {
                //layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', { time: 5000, icon: 6 });
            }
        });
    }
</script>
</html>
